
<script setup lang="ts">
import { toRefs, ref, watch, computed } from 'vue'
import { useRouter } from 'vue-router';
import { useShoppingStore } from '../../stores/shopping'
import ProductCard from '../../components/ProductCardComp/ProductCard.vue'
const router = useRouter()
const { shoppingCartList } = toRefs(useShoppingStore())
const { changeShoppingCartList, delShopping } = useShoppingStore()
// console.log(shoppingCartList.value);
const curremtList = computed(() => {
    let arr = shoppingCartList.value ? shoppingCartList.value : []
    return arr
})
console.log(curremtList);

// 是否全选
const isSelectAll = ref(false)
// 监听全选 如果全选就把全部选项卡打勾
watch(() => isSelectAll.value, (n, o) => {
    if (n != o && n) {

        changeShoppingCartList({
            type: 2
        })
        curremtList.value.map(item => {
            item.selectedStatus = true
        })

    } else if (!isClickAll.value) {
        changeShoppingCartList({
            type: 3
        })
        curremtList.value.map(item => {
            item.selectedStatus = false
        })
    }
})

// 判断是点击全部还是点击当个自动取消全选
const isClickAll = ref(true)
const changeSelectAll = (flag: boolean) => {
    if (flag) {
        isClickAll.value = !flag
    } else {
        isClickAll.value = !flag
    }
    isSelectAll.value = flag
}

// 购物车总价
const priceTotle = computed(() => {
    let num = 0
    shoppingCartList.value.map(item => {
        if (item.selectedStatus) {
            num += item.num * item.nowprice
        }
    })

    return num
})

// 是否是编辑状态
const isEdit = ref(false)
const removeCart = () => {
    delShopping()
    isSelectAll.value = false
    isClickAll.value = false
}

const goToOrder = () => {
    let arr = []
    // 判断是否有勾选的
    let flag = false
    curremtList.value.map(item => {
        if (item.selectedStatus) {
            arr.push(item)
            flag = true
        }
    })

    if (flag) {

        router.push({
            name: 'order',
            params: {
                list: JSON.stringify(arr)
            }
        })

    }

}

</script>


<template>
    <div class="shopping-cart">

        <div class="my-nar-bar">
            <van-nav-bar>
                <template #left>
                    <van-icon @click="router.go(-1)" color="#5e5e5e" name="arrow-left" size="18" />
                </template>
                <template #title>
                    <span class=" text-gray-400">购物车</span>
                </template>
                <template #right>
                    <span @click="isEdit = !isEdit" class=" text-gray-400">
                        {{ isEdit ? '取消编辑' : '编辑' }}
                    </span>
                </template>
            </van-nav-bar>
        </div>

        <div class="list mt-4 pb-4 mx-2 bg-white">
            <ProductCard :list="s" @changeSelectAll=changeSelectAll v-for="s in curremtList" :key="s.stockId">
            </ProductCard>
            <van-empty v-show="curremtList.length==0" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="购物车为空" />

        </div>

        <div class="settlement flex justify-between w-full fixed bottom-0 bg-white p-3">

            <div class="left-choice flex items-center ">
                <input class=" w-5 h-5 mr-2" type="checkbox" v-model="isSelectAll">
                <span>全选({{ shoppingCartList.length }})</span>
            </div>

            <div class="settlement-btn">
                <span v-show="!isEdit">￥{{ priceTotle.toFixed(2) }}</span>
                <span @click="goToOrder" v-show="!isEdit"
                    class="px-4 py-2 ml-2 rounded-full bg-red-400 text-white">结算</span>
                <span v-show="isEdit"
                    class="px-4 py-2 ml-2 rounded-full bg-white text-red-400 border border-red-400">移入收藏夹</span>
                <span @click="removeCart" v-show="isEdit"
                    class="px-4 py-2 ml-2 rounded-full bg-red-400 text-white">删除</span>
            </div>

        </div>
    </div>
</template>


<style lang="scss" scoped>
.shopping-cart {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #efefef;
    z-index: 10;

    .list {
        height: 85vh;
        overflow-y: auto;
    }
}
</style>